<template>
  <div>
      <mod-main-header :todos="todos" @show="showNav"></mod-main-header>
      <mod-main-nav :todos="todos" @close="hideNav"  v-clickoutside="hideNav" :class="{show: navShow}"></mod-main-nav>
      <main class="main-body">
        <router-view></router-view>
      </main>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import ModMainHeader from '../modules/main/ModMainHeader.vue'
import ModMainNav from '../modules/main/ModMainNav.vue'

@Component({ name: 'Main', components: { ModMainHeader, ModMainNav } })
export default class Main extends Vue {
  todos: number = 1

  navShow: boolean = false

  hideNav () {
    this.navShow = false
  }

  showNav () {
    this.navShow = true
  }
}
</script>
<style lang="less">
@import url(../styles/variable.less);

@nav-width: 220px;

.main-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition: width 0.15s;
  min-height: @header-height;
  z-index: 100;
  overflow: hidden;

  .mod-main-nav {
    width: 0;
  }
}

.main-nav.show {
  width: @nav-width;

  .mod-main-nav {
    width: @nav-width;
  }
}

.main-body {
  padding-top: @header-height;
}
</style>
